import { useOrder } from './useOrder'
import { OrderState } from '@/apis'
import { Button } from '@/components/ui/button'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'

const formatOrderState = (orderState: OrderState): string => {
  const Map: Record<OrderState, string> = {
    1: '待付款',
    2: '待发货',
    3: '待收货',
    4: '待评价',
    5: '已评价',
    6: '已取消',
  }
  return Map[orderState]
}

const Order = () => {
  const { orderList, ship, consignment } = useOrder()
  return (
    <div className="rounded-md border">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>订单id</TableHead>
            <TableHead>订单状态</TableHead>
            <TableHead>操作</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {orderList.map((order) => (
            <TableRow key={order.id}>
              <TableCell className="font-medium">{order.id}</TableCell>
              <TableCell>{formatOrderState(order.orderState)}</TableCell>
              <TableCell>
                {order.orderState === 2 && (
                  <Button onClick={() => consignment(order.id)}>发货</Button>
                )}
                {order.orderState === 3 && (
                  <Button
                    onClick={() =>
                      ship({
                        orderId: order.id,
                      })
                    }>
                    修改为待发货
                  </Button>
                )}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}

export default Order
